<template>
  <div class="w-full h-full typebox">
    <div class="type h-[56px] flex justify-center items-center flex-1 active">
      <div class="h-[18px] icon">
        <el-icon size="18"><Operation /></el-icon>
      </div>
      <div class="ml-[5px] txt">组件</div>
    </div>
    <div class="flex cloumenBox">
      <TypeList @getComponentType="componentType" />
      <BaseStyle :componentType="curComponentType" @selectComponent="addComponent" />
    </div>
  </div>
</template>

<script setup lang="ts">
import TypeList from './typeList.vue';
import BaseStyle from './baseStyle.vue';
import { ComponentVO } from '@/api/advertisement/site/types';

const curComponentType = ref<string>('image');

const emit = defineEmits(['setComponentType']);

/**
 * 获取组件类型
 */
const componentType = (type: string) => {
  curComponentType.value = type;
};

const addComponent = (val: ComponentVO) => {
  emit('setComponentType', val);
};
</script>

<style lang="scss" scoped>
.typebox {
  -webkit-box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.1);
  .type {
    &.active {
      background-color: #4d8fff;
      color: #fff;
    }
  }
}
.cloumenBox {
  height: calc(100% - 56px);
}
</style>
